<template>
  <div class="row">
    <div class="small-8 columns with-right-space macros-canvas">
      <macro-nodes
        v-model="macro.actions"
        :files="files"
        @addNewNode="appendNode"
        @deleteNode="deleteNode"
        @resetAction="resetNode"
      />
    </div>
    <div class="small-4 columns">
      <macro-properties
        :macro-name="macro.name"
        :macro-visibility="macro.visibility"
        @update:name="updateName"
        @update:visibility="updateVisibility"
        @submit="submit"
      />
    </div>
  </div>
</template>

<script>
import MacroNodes from './MacroNodes'
import MacroProperties from './MacroProperties'
import { required, requiredIf } from 'vuelidate/lib/validators'

export default {
  components: {
    MacroNodes,
    MacroProperties,
  },
  provide () {
    return {
      $v: this.$v,
    }
  },
  props: {
    macroData: {
      type: Object,
      default: () => ({}),
    },
  },
  data () {
    return {
      macro: this.macroData,
    }
  },
  computed: {
    files () {
      if (this.macro && this.macro.files) return this.macro.files
      return []
    },
  },
  watch: {
    $route: {
      handler () {
        this.resetValidation()
      },
      immediate: true,
    },
    macroData: {
      handler () {
        this.macro = this.macroData
      },
      immediate: true,
    },
  },
  validations: {
    macro: {
      name: {
        required,
      },
      visibility: {
        required,
      },
      actions: {
        required,
        $each: {
          params: {
            required: requiredIf(prop => {
              if (prop.name === 'send_email_to_team') return true
              return !(
                prop.name === 'mute_conversation' ||
                prop.name === 'snooze_conversation' ||
                prop.name === 'resolve_conversation' ||
                prop.name === 'remove_assigned_team'
              )
            }),
          },
        },
      },
    },
  },
  methods: {
    updateName (value) {
      this.macro.name = value
    },
    updateVisibility (value) {
      this.macro.visibility = value
    },
    appendNode () {
      this.macro.actions.push({
        name: 'assign_team',
        params: [],
      })
    },
    deleteNode (index) {
      this.macro.actions.splice(index, 1)
    },
    submit () {
      this.$v.$touch()
      if (this.$v.$invalid) return
      this.$emit('submit', this.macro)
    },
    resetNode (index) {
      this.$v.macro.actions.$each[index].$reset()
      this.macro.actions[index].params = []
    },
    resetValidation () {
      this.$v.$reset()
    },
  },
}
</script>

<style scoped lang="scss">
.row {
  height: 100%;
}
.macros-canvas {
  background-image: radial-gradient(var(--s-75) 1.2px, transparent 0);
  background-size: var(--space-normal) var(--space-normal);
  height: 100%;
  max-height: 100%;
  padding: var(--space-normal) var(--space-larger);
  max-height: 100vh;
  overflow-y: auto;
}
</style>
